import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Text, ScrollView, Swiper, SwiperItem } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime, pageSize } from "../../utils/common";
import indexStyleSheet from "./index_styles";
var _styleSheet = indexStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Personnel = class Personnel extends Component {
  constructor(porps) {
    super(porps);
    this.state = {
      banner: [],
      recommendCategories: [],
      items: [],
      totalCount: 0,
      pageIndex: 1,
      pageSize,
      currentNavId: 1,
      navActive: false
    };
  }
  componentDidShow() {
    Taro.setNavigationBarTitle({ title: '积分商城' });
    this.getHomeInfo();
    this.getAllItemsInfo();
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  getHomeInfo() {
    let { PointMallStore } = this.props.stores;
    PointMallStore.getHomeInfo({
      callback: home => {
        let homeArr = toJS(home);
        this.setState({
          banner: homeArr.upBanners,
          recommendCategories: homeArr.recommendCategories
        });
      }
    });
  }
  getAllItemsInfo() {
    let { currentNavId, pageIndex, pageSize } = this.state;
    let { PointMallStore } = this.props.stores;
    PointMallStore.getAllItemsInfo({
      formRecommendCategoryId: currentNavId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({ totalCount: toJS(res.totalCount), items: toJS(res.items) });
        } else {
          const { items } = this.state;
          items.push(...(res.items || []));
          this.setState({ totalCount: res.totalCount, items });
        }
      }
    });
  }
  changeNavId(currentNavId) {
    this.setState({
      currentNavId,
      items: [],
      pageIndex: 1
    }, () => {
      this.getAllItemsInfo();
    });
  }
  onReachBottom() {
    let { totalCount, pageSize, pageIndex } = this.state;
    const { loading } = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllItemsInfo();
      });
    }
  }
  onScroll(e) {
    let top = e.detail.scrollTop;
    if (top >= 165) {
      this.setState({
        navActive: true
      });
    } else {
      this.setState({
        navActive: false
      });
    }
  }
  render() {
    let { banner, recommendCategories, items, currentNavId, navActive } = this.state;
    return <ScrollView scrollY={true} scrollWithAnimation={true} onScroll={this.onScroll.bind(this)} style={_styleSheet["mall-index"]}>
        <View style={_styleSheet["swiper-wrap"]}>
          <Swiper indicatorColor="#fff" indicatorActiveColor="#00a0e9" circular indicatorDots style={_styleSheet["swiper"]}>
            {banner.map(item => {
            return <SwiperItem key={item.id} style={_styleSheet["swiper-item"]}>
                    <Image src={item.picture} style={_styleSheet["swiper-img"]} />
                  </SwiperItem>;
          })}
          </Swiper>
        </View>

        <ScrollView scrollX={true} style={_getStyle(navActive ? 'scroll-view-nav nav-active' : 'scroll-view-nav')}>
          {recommendCategories.length > 0 && recommendCategories.map(item => {
          return <View key={item.id} onClick={this.changeNavId.bind(this, item.id)} style={_getStyle(currentNavId === item.id ? 'scroll-item scroll-item-on' : 'scroll-item')}>
                  {item.title}<Text style={_styleSheet["line"]} /></View>;
        })}
        </ScrollView>
        {navActive && <View style={_styleSheet["block"]} />}

        <View style={_styleSheet["list-14"]}>
          {items && items.map(item => {
          return <View key={item.id} onClick={this.handelRouter.bind(this, '/pages/mall/detail?id=' + item.id)} style={_styleSheet["list-14-item"]}>
                   <Image src={item.picture} style={_styleSheet["item-img"]} />
                   <View style={_styleSheet["info"]}>
                     <View style={[_styleSheet["title"], _styleSheet["list-title"]]}>
                       {item.name}
                     </View>
                     <View style={[_styleSheet["price"], _styleSheet["list-price"]]}><Text style={[_styleSheet["small"], _styleSheet["list-small"]]}>￥</Text>{item.price}</View>
                   </View>
                 </View>;
        })}

          {items.length <= 0 && <View style={_styleSheet["page-none-info"]}>暂时没有该类商品哦~</View>}
        </View>

        <View style={_styleSheet["footer-block"]} />
        <View onClick={this.handelRouter.bind(this, '/pages/mall/custom')} style={_styleSheet["page-submit"]}>礼品定制中心＞ </View>
      </ScrollView>;
  }
};
Personnel = tslib_1.__decorate([inject("stores"), observer], Personnel);
export default Personnel;